import React, {Component, PropTypes} from 'react';
import {Row, Col, Button, Modal, Input, Table, Icon, Tag} from 'antd';
import {updateCat} from "../../services/showServer";
import {getCatByCatId} from "../../services/showServer";

class BindListContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      id: '',
      name: '',
      comment: '',
      type: '',
      path: '',
      subname: '',
      catname: '',
      selectedRowKeys: [],
      updateModalVisible: false,
      data: [],
    };
  }

  onSelectChange(selectedRowKeys) {
    this.setState({selectedRowKeys});
  }

  onRowClick(e) {
    if (e.type == 2) {
      var point = {
        id: e.id,
        type: 2,
        path: this.state.path + " > " + e.name,
        catname: e.name
      }
      this.props.listSignal.dispatch(point);
    }
  }

  onCatSetClick() {
    getCatByCatId(this.state.id).then(function (json) {
      this.setState({
        id: json.id,
        name: json.name,
        comment: json.comment,
        updateModalVisible: true,
      });
    }.bind(this));
  }

  unbindClick() {

    // console.log(this.state.selectedRowKeys);
    // var selectList = [];
    // for (var i in this.state.selectedRowKeys) {
    //   selectList.push(this.state.data[i].id);
    // }
    // console.log(selectList);
    this.props.signal.dispatch(this.state.selectedRowKeys);
    this.setState({selectedRowKeys: []});
  }

  handleUpdateModalOk() {

    var cat = {
      "comment": this.state.comment,
      "id": this.state.id,
      "name": this.state.name
    }

    updateCat(cat).then(function (res) {
      //更新成功后刷新页面数据
      if (res.status == 200) {
        //更新当前页面数据
        this.setState({
          catname: this.state.name,
          updateModalVisible: false,
        });
        //更新左侧tree
        var point = {
          id: this.state.id,
          type: 2
        }
        this.props.listCatSignal.dispatch(point);

      } else {
        this.setState({
          updateModalVisible: false,
        });
        notification['error']({
          message: 'Error',
          description: '更新分类错误，请稍后重试！',
        })
      }
    }.bind(this));
  }

  handleUpdateModalCancel() {
    this.setState({
      updateModalVisible: false,
    });
  }

  handleNameChange(e) {
    this.setState({
      name: e.target.value,
    });
  }

  handleCommentChange(e) {
    this.setState({
      comment: e.target.value,
    });
  }

  render() {
    const {selectedRowKeys} = this.state;

    const InfoRender = (text, record) => {
      if (record.type == 2) {
        return (
          <span><Icon type="appstore"/>&nbsp;&nbsp;&nbsp;{text}</span>
        )
      }
      if (record.type == 3) {
        return (
          <span><Icon type="file-text"/>&nbsp;&nbsp;&nbsp;{text}</span>
        )
      } else {
        return null;
      }
    }

    const columns = [{
      title: '内容列表',
      dataIndex: 'name',
      key: 'name',
      render: (text, record) => (
        InfoRender(text, record)
      ),
    }];

    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange.bind(this),
    };

    const SubTag = (subname) => {
      if (subname == '') {
        return null
      } else {
        return (
          <Tag color="#87d068">{subname}</Tag>
        )
      }
    }

    const CatTag = (catname) => {
      if (catname == '') {
        return null
      } else {
        return (
          <Tag color="#108ee9">{catname}</Tag>
        )
      }
    }

    const CatBut = (type) => {
      if (type != 2) {
        return (
          <Button type="ghost" icon="setting" disabled onClick={this.onCatSetClick.bind(this)}>分类设置</Button>
        )
      } else {
        return (
          <Button type="ghost" icon="setting" onClick={this.onCatSetClick.bind(this)}>分类设置</Button>
        )
      }
    }

    return (
      <div>
        <Row>
          <Col span={16}>
            {SubTag(this.state.subname)}
            {CatTag(this.state.catname)}
            <br/>
            <br/>
          </Col>
          <Col span={4}>
            {CatBut(this.state.type)}
            <br/>
            <br/>
          </Col>
          <Col span={4}>
            <Button type="ghost" icon="right" onClick={this.unbindClick.bind(this)}>解绑数据</Button>
            <br/>
            <br/>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Table rowSelection={rowSelection} dataSource={this.state.data} onRowClick={this.onRowClick.bind(this)}
                   columns={columns} pagination={false} size="middle" rowKey="id"/>
          </Col>
        </Row>
        <Modal ref="updateModal"
               visible={this.state.updateModalVisible}
               title="更新分类" onOk={this.handleUpdateModalOk.bind(this)}
               onCancel={this.handleUpdateModalCancel.bind(this)}
               footer={[
                 <Button key="back" type="ghost" onClick={this.handleUpdateModalCancel.bind(this)}>返
                   回</Button>,
                 <Button key="submit" type="primary" onClick={this.handleUpdateModalOk.bind(this)}>
                   保 存
                 </Button>,
               ]}
        >
          <Row>
            <Col span={3} style={{textAlign: "right"}}><p>分类名称：</p></Col>
            <Col span={21}>
              <Input id="name" value={this.state.name}
                     onChange={this.handleNameChange.bind(this)}/>
            </Col>
          </Row>
          <p></p>
          <Row>
            <Col span={3} style={{textAlign: "right"}}><p>分类说明：</p></Col>
            <Col span={21}>
              <Input id="comment" type="textarea" rows={4} value={this.state.comment}
                     onChange={this.handleCommentChange.bind(this)}/>
            </Col>
          </Row>
        </Modal>
      </div>
    );
  }
}

export default BindListContainer;
